<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:85:"/data/wwwroot/default/s78_daiju/tp5/public/../application/index/view/index/login.html";i:1540025798;}*/ ?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>LOGIN</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="/static/index/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="/static/index/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <link rel="stylesheet" href="/static/index/css/amazeui.min.css" />
    <link rel="stylesheet" href="/static/index/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="/static/index/css/app.css">
    <script src="/static/index/js/jquery.min.js"></script>

    <style>
        body {
            margin: 50px 0;
            text-align: center;
        }
        .inp {
            border: 1px solid gray;
            padding: 0 10px;
            width: 200px;
            height: 30px;
            font-size: 18px;
        }
        .btn {
            border: 1px solid gray;
            width: 100px;
            height: 30px;
            font-size: 18px;
            cursor: pointer;
        }
        #embed-captcha {
            width: 300px;
            margin: 0 auto;
        }
        .show {
            display: block;
        }
        .hide {
            display: none;
        }
        #notice {
            color: red;
        }
    </style>

</head>
<body>
  <script src="/static/index/js/theme.js"></script>
  <div class="am-g tpl-g">
      <!-- 风格切换 -->
      <div class="tpl-skiner">
          <div class="tpl-skiner-toggle am-icon-cog">
          </div>
          <div class="tpl-skiner-content">
              <div class="tpl-skiner-content-title">
                  选择主题
              </div>
              <div class="tpl-skiner-content-bar">
                  <span class="skiner-color skiner-white" data-color="theme-white"></span>
                  <span class="skiner-color skiner-black" data-color="theme-black"></span>
              </div>
          </div>
      </div>
      <div class="tpl-login">
          <div class="tpl-login-content">

                <form class="am-form tpl-form-line-form" action="<?php echo url('index/Index/doLogin'); ?>" name="myform" method="post" onsubmit="return checkForm()">
                    <div class="am-form-group">
                        <!-- <input type="text" class="tpl-form-input" id="user-name" placeholder="请输入账号"> -->
                        <input id="tip1" class="inp tpl-form-input" id="customer_name user-name" type="text" name="customer_name"  value="" placeholder="请输入您的手机号" autocomplete="off"  onblur="checkTel()" autofocus maxlength="11">
                        <span id="teltab"></span>
                    </div>

                    <div class="am-form-group">
                        <!-- <input type="password" class="tpl-form-input" id="user-name" placeholder="请输入密码"> -->
                        <input id="tip2" class="inp" id="customer_password" type="password" name="customer_password" value="" placeholder="请输入您的密码" autocomplete="off" onblur="checkPass()">
                        <span id="ptab"></span>
                    </div>

                    <div class="am-form-group">
                      <div id="embed-captcha"></div>
                      <p id="wait" class="show">正在加载验证码......</p>
                      <p id="notice" class="hide">请先完成验证</p>

                    </div>

                    <div class="am-form-group tpl-login-remember-me">
                        <!-- <input id="remember-me" type="checkbox"> -->
                        <input type="checkbox" name="checkbox" value="1" checked>
                        <label for="remember-me">
                
                        记住密码
                         </label>

                    </div>
                    <div class="am-form-group">

                        <!-- <button type="button" class="am-btn am-btn-primary  am-btn-block tpl-btn-bg-color-success  tpl-login-btn">提交</button> -->
                        <input class=" btn-info btn-lg am-btn am-btn-primary  am-btn-block tpl-btn-bg-color-success  tpl-login-btn" id="embed-submit" type="submit" value="登录">

                    </div>
                </form>
                
                <a href="<?php echo url('index/Index/register'); ?>" class="am-btn am-btn-primary  am-btn-block tpl-btn-bg-color-success  tpl-login-btn">注册</a>
          </div>
      </div>
  </div>

  <script src="/static/index/js/amazeui.min.js"></script>
  <script src="/static/index/js/app.js"></script>
  <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
  <script src="/static/index/js/gt.js"></script>
  <script>
      var handlerEmbed = function (captchaObj) {
          $("#embed-submit").click(function (e) {
              var validate = captchaObj.getValidate();
              if (!validate) {
                  $("#notice")[0].className = "show";
                  setTimeout(function () {
                      $("#notice")[0].className = "hide";
                  }, 2000);
                  e.preventDefault();
              }
          });
          // 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode
          captchaObj.appendTo("#embed-captcha");
          captchaObj.onReady(function () {
              $("#wait")[0].className = "hide";
          });
          // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
      };
      $.ajax({
          // 获取id，challenge，success（是否启用failback）
          url: "checkGeetest?t=" + (new Date()).getTime(), // 加随机数防止缓存
          type: "get",
          dataType: "json",
          success: function (data) {
              console.log(data);
              // 使用initGeetest接口
              // 参数1：配置参数
              // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
              initGeetest({
                  gt: data.gt,
                  challenge: data.challenge,
                  new_captcha: data.new_captcha,
                  product: "embed", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                  offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                  // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
              }, handlerEmbed);
          }
      });
  </script>

  <script>
      function checkTel() {
          var customer_name = document.myform.customer_name.value;
          var teltab = document.getElementById('teltab');
          var tip1 = document.getElementById('tip1');
          if(/^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/.test(customer_name)){
              // teltab.innerHTML = '√';
              // teltab.style.color = '#0a0';
              tip1.style.color = '#0a0';
              return true;
          }else{
              // teltab.innerHTML = '×';
              // teltab.style.color = '#f00';
              tip1.style.color = '#f00';
              return false;
          }
      }

      function checkPass() {
          var customer_password = document.myform.customer_password.value;
          var ptab = document.getElementById('ptab');
          var tip2 = document.getElementById('tip2');
          if(customer_password.length < 6 || customer_password.length > 12){
              // ptab.innerHTML = '×';
              // ptab.style.color = '#f00';
              tip2.style.color = '#f00';
              return false;
          }else{
              // ptab.innerHTML = '√';
              // ptab.style.color = '#0a0';
              tip2.style.color = '#0a0';
              return true;
          }
      }

      // 表单提交验证
      function checkForm() {
          return checkTel() && checkPass();
      }

  </script>


</body>
</html>

